<template>
  <div>

    <el-tag
      v-for="(p,i) in pointList"
      :key="p.pointCode"
      :disable-transitions="false"
      closable
      @close="handleRemove(i)">
      {{ p.pointName }}
    </el-tag>

    <el-button size="mini" type="primary" @click="showJoin">+添加</el-button>

    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      append-to-body
      title="选择知识点"
      width="50%;"
    >
      <div v-if="dialogVisible" style="max-height: 500px;overflow: scroll">

        <el-tree
          ref="tree"
          :data="treeData"
          :close-on-click-modal="false"
          :check-strictly="true"
          :props="treeProps"
          show-checkbox
          default-expand-all
          node-key="pointCode"
          highlight-current
        />

      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmJoin">确 定</el-button>
      </span>

    </el-dialog>

  </div>

</template>

<script>

import { fetchTree } from '@/api/sys/kp/kp'

export default {
  name: 'KeyPointSelect',
  props: {
    value: Array,
    root: String
  },
  data() {
    return {
      // 下拉选项值
      pointList: [],
      dialogVisible: false,
      treeProps: {
        value: 'pointCode',
        label: 'pointName',
        children: 'children'
      },
      query: {
        pointRoot: null,
        useCache: true
      },
      treeData: []
    }
  },

  watch: {
    // 检测查询变化
    value: {
      handler(val) {
        this.pointList = val || []
      }
    },
    pointList: {
      handler(val) {
        this.$emit('input', val || [])

        const list = []
        if (val && val.length >= 0) {
          // 返回列表
          for (let i = 0; i < this.pointList.length; i++) {
            list.push(this.pointList[i].pointCode)
          }
        }
        this.$emit('change', list)
      },
      deep: true
    },
    root(val) {
      this.query.pointRoot = val
    },
    dialogVisible(val) {
      if (val) {
        this.showTree()
      }
    }
  },
  created() {
    this.query.pointRoot = this.root
    this.pointList = this.value || []
  },
  methods: {

    showTree() {
      console.log('查询子十点啊', this.query)
      fetchTree(this.query).then(res => {
        this.treeData = res.data
        this.reverseCheck()
      })
    },

    reverseCheck() {
      // 清空上个勾选
      if (this.$refs.tree) {
        this.$refs.tree.setCheckedKeys([])
        this.pointList.forEach(v => {
          this.$refs.tree.setChecked(v.pointCode, true, false)
        })
      }
    },

    // 移除知识点
    handleRemove(i) {
      this.pointList.splice(i, 1)
    },

    // 打开加入知识点窗口
    showJoin() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.reverseCheck()
      })
    },
    // 加入知识点
    confirmJoin() {
      this.dialogVisible = false
      const allNodes = this.$refs.tree.getCheckedNodes(false, false)
      this.pointList = []
      for (let i = 0; i<allNodes.length; i++) {
        this.pointList.push({ pointCode: allNodes[i].pointCode, pointName: allNodes[i].pointName })
      }
    }
  }
}
</script>

<style scoped>
.el-tag{
  margin-right: 5px;
}
</style>
